<template>
    <div>
        <h3>这是图片详情页面------{{id}}</h3>   

        <!-- 缩略图区域 -->
    <div class="thumbs">
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
      <!-- <vue-preview :slides="list" @close="handleClose"></vue-preview> -->
    </div>

        <comments :id="id"></comments> 
    </div>    
</template>

<script>
    import comments from '../subcomponents/comment.vue'
    export default {
        data(){
            return {
                id : this.$route.params.id,
                list:[]
            }
        },
        created(){
            this.getthumimages();
        },
        methods:{
            getthumimages(){
                this.$http.get('http://127.0.0.1:5000/api/getthumimages/'+this.id).then(result=>{
                    console.log(result);
                    result.body.message.forEach(item=>{
                        item.w = 600;
                        item.h = 400;
                    });
                    this.list = result.body.message;
                })
            }
        },
        components:{
            comments
        }
    }
</script>

<style>

</style>

